<!--
 * @Author: mengfei
 * @Description: 开通用水代办详情
-->
<template>
    <div class="open-water-detail">
      <div ref="wrapEl" class="current-table">
        <FormTitle text="办理账户" icon="currentTable" />
        <Description
            :bordered="false"
            :column="3"
            :data="data?.user_info[0]"
            :schema="handleAccountSchemas"
          />
        <div class="split-line"></div>
        <FormTitle text="开通用水办理信息" icon="remarkInfo" />
        <Description :bordered="false" :column="2" :data="data?.business_handling_simple_oo" :schema="remarksSchemas" />
        <div class="split-line"></div>
          <FormTitle text="水表信息" icon="meters" />
          <Description
            class="border-description"
            :column="2"
            :bordered="true"
            :data="data?.user_meter_info[0]"
            :schema="waterInfoSchemas"
          />
      </div>
      <template v-if="hasBackBtn">
        <div class="split-line"></div>
        <div class="footer mt-24px">
            <a-button class="mr-24px" @click="cancelModal">返回</a-button>
        </div>
      </template>

    </div>
  </template>
  
  <script lang="ts" setup>
    import {
      getWaterInfoDesConfig,
      getRemarksSchemasConfig,
      getHandleAccountDesConfig,
    } from './data/index';
    import { ref, computed } from 'vue';
    import { Description, DescItem } from '/@/components/Description/index';
    import FormTitle from '../FormTitle.vue';
    import { useRouter } from 'vue-router';

    const router = useRouter();
    const wrapEl = ref<ElRef>(null);

    const props = withDefaults(defineProps<{
      data: any;
      hasBackBtn?: boolean
    }>(), {
      hasBackBtn:false,
    })

    const waterInfoSchemas = computed((): DescItem[] => getWaterInfoDesConfig());
    const remarksSchemas = computed((): DescItem[] => getRemarksSchemasConfig());
    const handleAccountSchemas = computed((): DescItem[] => getHandleAccountDesConfig(props.data?.business_handling_simple_oo || ''));
    
    const cancelModal = async () => {
      router.back();
    };
  </script>
  
  <style lang="less" scoped>
    @import './style/detail.less';
  </style>
  